import {createApp} from 'vue'
import App from './App.vue'

/** 引入v-md-editor*/
import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

// codemirror 编辑器的相关资源
import Codemirror from 'codemirror';
// mode
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// style
import 'codemirror/lib/codemirror.css';

// 引入预览组件
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import '@kangc/v-md-editor/lib/theme/style/github.css';

VMdEditor.Codemirror = Codemirror;
VMdEditor.use(githubTheme, {
    Hljs: hljs,
});

// 预览组件
VMdPreview.use(githubTheme, {
    Hljs: hljs,
});


const app = createApp(App)

// 引入element-plus
import ElementPlus from 'element-plus'
import './assets/style/element-variables.scss'

// 引入路由
import router from './router'

// 引入pinia
import pinia from './pinia'

// 权限控制
import './permission'


// 全局注册element-plus/icons-vue
import * as ICONS from '@element-plus/icons-vue'

Object.entries(ICONS).forEach(([key, component]) => {
    app.component(key, component)
})

// 注册特效组件
// import SpiderGrid from '@/components/SpecialEffects/SpiderGrid/SpiderGrid.vue'
import FireWork from '@/components/SpecialEffects/FireWork/FireWork.vue'
// app.component('SpiderGrid', SpiderGrid)
app.component('FireWork', FireWork)

// 注册自定义指令
import * as Directives from '@/directive'

Object.values(Directives).forEach(fn => fn(app))

app.use(ElementPlus)
    .use(VMdEditor)
    .use(VMdPreview)
    .use(router)
    .use(pinia)

app.mount('#app')
